<template>
  <div
    v-loading="loading"
    class="app-container"
  >
    <el-row :gutter="0">
      <el-col
        v-for="(item, index) in imgList"
        :key="index"
        :span="8"
      >
        <el-card
          :body-style="{ padding: '0px' }"
          style="margin-top: 13px"
        >
          <el-image
            class="image"
            :src="item.picturePath"
            :preview-src-list="[item.picturePath]"
            fit="fit"
          />
          <div style="padding: 14px;">
            <span>{{ hid }}</span>
            <div class="bottom clearfix">
              <time class="time">{{ formatDate(item.createdDate) }}</time>
              <el-button type="text" class="button" style="color: #f56c6c" @click="del(item)">{{ $t("delete") }}</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div style="text-align: right;margin: 15px 0">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {
  formatDate,
  cancelNotice
} from '@/util/common'
import {
  pageGetCameraImg,
  deleteCameraImg,
  deleteListCameraImg
} from '@/api/camera/cameraImgApi'
import { getPageSize, setPageSize } from '@/util/storage'
export default {
  name: 'CameraImage',
  data() {
    return {
      imgList: [],
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      mList: [],
      hid: null,
      deviceId: null,
      loading: false
    }
  },
  mounted() {
    const param = this.$route.query
    this.hid = param.hid
    this.deviceId = param.deviceId
    this.getImgList()
    this.setTagsViewTitle()
  },
  methods: {
    formatDate(time) {
      return formatDate(this, time)
    },
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.hid}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.getImgList()
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.getImgList()
    },
    mDel() {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteListCameraImg({
            idList: that.mList
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.getImgList()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    del(index) {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteCameraImg({
            imgId: index.imgId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.getImgList()
            }
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    },
    getImgList() {
      this.loading = true
      pageGetCameraImg({
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        deviceId: this.deviceId
      }).then(res => {
        const { data, code } = res
        if (code === '200') {
          this.total = data.total
          this.imgList = data.data
          this.loading = false
        } else {
          this.imgList = []
          this.loading = false
        }
      })
    }
  }
}
</script>
<style scoped>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
